<template>
  <div>
    <div class="tenantInfo-header">信息管理</div>
    <div class="tenantInfo-box">
      <div class="tenantInfo-box-title">
        <img src=""
             alt="">
        <div class="title-corporate">
          <p>上海奥迪世博店</p>
          <div class="tags">私营企业</div>
        </div>
      </div>
      <div class="tenantInfo-box-content">
        <div class="tenantInfo-box-button">
          <a-button type="danger"
                    @click="add('add')">
            <a-icon type="plus" />
            新增联系人
          </a-button>
          <a-button @click="del()">
            <a-icon type="delete" />删除
          </a-button>
          <a-select v-model="this.tenantId"
                    @change="onSerch()"
                    placeholder="管理员"
                    style="width:184px;float:right">
            <a-select-option v-for="item in cardTypeArr"
                             :value="item.tenantId"
                             :key="item.id">
              {{item.tenantName}}
            </a-select-option>
          </a-select>
        </div>
        <div class="tables">
          <a-table :columns="columns"
                   :data-source="data"
                   :pagination="false"
                   v-if="data.length>0">
            <span slot="age"
                  slot-scope="text, record">
              <div style="color:#1876ff">{{record.age}}</div>
            </span>
            <span slot="status"
                  slot-scope="text, record">
              <div class="ages"
                   v-if="record.status == 1">待开票</div>
              <div class="ages1"
                   v-if="record.status == 2">已开票</div>
            </span>
            <span slot="action"
                  slot-scope="text, record"
                  class="content-action">
              <a-icon @click="add('edit')"
                      type="edit"
                      style="margin-right:8px" />
              <a-icon @click="del()"
                      type="delete"
                      style="color:red" />
            </span>
          </a-table>

          <div v-if="data.length === 0"
               class="zanwu">
            <img src="../../../assets/image/sellerHub/zanwuxinxi.png"
                 alt="">
            <p>暂无信息</p>
          </div>
        </div>
      </div>
      <div class="content-foot">
        <pagination @pageChange="pageChange"
                    :total="total"
                    :current="current"></pagination>
      </div>
    </div>

    <!-- //删除 -->
    <a-modal v-model="visible"
             width="400px"
             :dialog-style="{ top: '30vh' }"
             ok-text="确认"
             cancel-text="取消"
             @ok="handleOk">
      <p class="modal-p"> <img src="../../../assets/image/sellerHub/error_tip.png"
             alt=""> 是否确认删除该联系人信息</p>
    </a-modal>

    <!-- 新建修改 -->
    <contactAdd ref="contactAddForm"
                :visible="visible1"
                @confirmcontactAdd="confirmcontactAdd"
                @cancel="visible1 = false"></contactAdd>
  </div>
</template>
<script>
import pagination from '@/components/common/pagination.vue'
import contactAdd from "./components/contactAdd";
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '姓名',
    dataIndex: 'age',
    key: 'age',

  },
  {
    title: '角色',
    dataIndex: 'age',
    key: 'address 1',
    ellipsis: true,
    scopedSlots: { customRender: 'age' },
  },
  {
    title: '联系方式',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },

  {
    title: '地址',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: '邮箱',
    dataIndex: 'status',
    key: 'status',
    ellipsis: true,
  },
  {
    title: '是否接收消息',
    dataIndex: 'status',
    key: 'status',
    ellipsis: true,
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'action' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
    status: '1'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
    status: '2'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
    status: '2'
  },
];
export default {
  components: { pagination, contactAdd },
  data () {
    return {
      columns,
      data,
      cardTypeArr: [],
      visible: false,
      visible1: false,
    }
  },
  methods: {
    add (e) {
      console.log(e);
      this.visible1 = true
    },
    del () {
      this.visible = true
    }
  },
}
</script>
<style lang="less" scoped>
.tenantInfo-header {
  width: 100%;
  height: 54px;
  background: #fff;
  line-height: 54px;
  color: @newColorGreyFontM;
  font-size: 16px;
  padding-left: 24px;
}
.tenantInfo-box {
  margin: 16px;
  .tenantInfo-box-title {
    height: 116px;
    background: #fff;
    margin-bottom: 16px;
    padding: 24px;
    > img {
      float: left;
      width: 68px;
      height: 68px;
      background: pink;
    }
    .title-corporate {
      margin-left: 84px;
      position: relative;
      > p {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 500;
      }
      .tags {
        width: 64px;
        height: 24px;
        background: rgba(24, 118, 255, 0.08);
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #1876ff;
        text-align: center;
        line-height: 24px;
        margin-bottom: 16px;
      }
    }
  }
  .tenantInfo-box-content {
    padding: 24px;
    background: #fff;
    .tenantInfo-box-button {
      overflow: hidden;
      margin-bottom: 16px;
    }
  }
}
.modal-p {
  text-align: center;
  margin-top: 9px;
  margin-bottom: 9px;
  font-size: 12px;
  img {
    width: 16px;
    height: 16px;
    vertical-align: sub;
  }
}
.zanwu {
  text-align: center;
  margin-top: 100px;
  p {
    font-size: 12px;
    margin-top: 30px;
  }
}
.content-foot {
  position: fixed;
  left: 173px;
  bottom: 0;
  right: 16px;
  // width: calc(100vw - 193px);
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
  height: 72px;
  background: #fff;
  padding: 24px;
  // margin: 0 16px;
  .pagination-inline {
    float: right;
  }
}
/deep/ .tenantInfo-box-button .ant-btn.ant-btn-danger {
  width: 108px;
  height: 32px;
  font-size: 12px;
  padding: 0;
  border-radius: 2px;
  margin-right: 8px;
  float: left;
}
/deep/ .tenantInfo-box-button .ant-btn {
  width: 72px;
  height: 32px;
  float: left;
  font-size: 12px;
  padding: 0;
  line-height: 32px;
  border-radius: 2px;
}
/deep/ .ant-select-search__field__placeholder {
  line-height: 25px;
  font-size: 12px;
}
/deep/ .ant-table-thead > tr > th {
  padding: 9px 16px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 9px 16px;
}
/deep/ .ant-modal-close-x {
  display: none;
}
/deep/ .ant-modal-footer {
  padding: 15px 16px;
  text-align: center;
}
/deep/ .ant-btn {
  width: 72px;
  height: 32px;
  font-size: 12px;
  border-radius: 2px;
}
/deep/ .ant-btn-primary {
  margin-left: 16px;
}
</style>